<template>
  <div>
    <div style="margin-bottom: 20px;">
    <el-card shadow="hover" body-style="width:100%;">
      <div style="display: flex">
        <!--        <el-input v-model="queryId" placeholder="请输入评论编号" />-->
        <div style="display: flex;align-items:center;margin-right:20px">用户名：</div>
        <el-input v-model="name" style="width: 200px" placeholder="请输入用户名" clearable />
        <div style="display: flex;align-items:center;margin-left:30px;margin-right:20px">审核状态：</div>
        <el-select v-model="statusSearch" style="width: 200px;margin-left: 30px" clearable placeholder="请选择" popper-class="my-popper-class">
          <el-option label="未提交审核" value="0" />
          <el-option label="待审核" value="1" />
          <el-option label="给予通过" value="2" />
          <el-option label="不予通过" value="3" />
        </el-select>
        <div style="padding: 0px 20px">
          <el-button type="primary" @click="getCommentList">查找评论</el-button>
        </div>
        <div>
          <el-button type="primary" plain @click="clearInput">清空</el-button>
        </div>
      </div>
    </el-card>
    </div>
    <el-card body-style="margin-top: 20px" shadow="hover">
      <el-table :data="commentList" style="width: 100%;" border stripe :header-cell-class-name="'headerBg'" >
        <el-table-column prop="id" label="评论编号" width="100px" align="center">
          <template scope="scope">
            <span>{{ (pageParams.page - 1) * pageParams.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="width" align="center">
          <template slot-scope="{ row }">
            <i class="el-icon-user-solid" />
            <span style="margin-left: 10px">{{ row.name || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="用户评论" width="width">
          <template slot-scope="{ row }">
            {{ row.content || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="reply" label="店主回复" width="width">
          <template slot-scope="{ row }">
            {{ row.reply || '--' }}
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="评论时间" width="width" align="center">
          <template slot-scope="{ row }">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ row.createDate || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="replyDate" label="回复时间" width="width" align="center">
          <template slot-scope="{ row }">
            <i class="el-icon-time" />
            <span style="margin-left: 10px">{{ row.replyDate || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" width="130px" align="center">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="width" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="removeComment(scope.row.id)"
            >删除评论</el-button>
            <el-button v-if="scope.row.status === '1' " type="success" size="mini" style="background-color: #0d8d84; color: #fff;" @click="showDialog(scope.row.id)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" style="width: 50%;height: 80%;margin-left: 25%">
      <span style="display:inline-block;border-left:5px solid #0d8d84;color:#0d8d84;padding-left:10px;font-weight:bold;">审核结果：</span>
      <el-radio v-model="audit" label="2">审核通过</el-radio>
      <el-radio v-model="audit" label="3">审核不通过</el-radio>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAudit()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页器 -->
    <el-pagination
      background
      style="margin-top: 20px; textalign: center"
      :current-page="pageParams.page"
      :page-sizes="[3, 5, 10]"
      :page-size="pageParams.pageSize"
      :pager-count="4"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="pageParams.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'AdminComment',
  data() {
    return {
      commentList: [],
      name: '',
      dialogVisible: false,
      audit: '2',
      statusSearch: '',
      comments: {
        id: 0
      },
      // 分页参数
      pageParams: {
        page: 1,
        pageSize: 5,
        total: 0
      }
    }
  },
  mounted() {
    this.getCommentList()
  },
  methods: {
    showDialog(id) {
      this.comments.id = id
      this.dialogVisible = true
    },
    async handleAudit() {
      console.log('当前的审核结果是:', this.audit)
      console.log('当前的id结果是:', this.comments.id)
      const comment = {
        status: this.audit,
        id: this.comments.id
      }
      const res = await this.$API.comment.reqAudit(comment)
      if (res.code === 200) {
        this.$notify({
          title: '提示',
          message: '审核成功!!!',
          type: 'success'
        })
        this.getCommentList()
      }
      this.dialogVisible = false
    },
    getStatusType(status) {
      return status === '0' ? 'warning'
        : status === '1' ? 'info'
          : status === '2' ? 'success'
            : 'danger'
    },
    getStatusText(status) {
      return status === '0' ? '未提交审核'
        : status === '1' ? '待审核'
          : status === '2' ? '给予通过'
            : '不予通过'
    },
    async getCommentList() {
      const res = await this.$API.admin.reqCommentListByPage(this.pageParams, this.name, this.statusSearch)
      if (res.code === 200) {
        this.pageParams.total = res.data.total
        this.commentList = res.data.commentVoList
      }
    },

    // async queryComment() {
    //   // 如果查询内容为空,那就刷新评论列表
    //   if (this.queryId === '') {
    //     this.getCommentList()
    //     return
    //   }
    //   console.log('-----------------', this.statusSearch)
    //   const res = await this.$API.admin.reqQueryComment(this.queryId)
    //   if (res.data === null) {
    //     this.$message.error('查找的评论不存在,请输入正确的评论编号')
    //     return
    //   }
    //   if (res.code === 200) {
    //     //              转换成数组赋值
    //     this.commentList = [res.data]
    //   }
    // },

    clearInput() {
      this.name = ''
      this.statusSearch = ''
      this.getCommentList()
    },
    removeComment(id) {
      // let res = this.$API.admin.reqRemoveComment(id);
      // if (res.code === 200) {
      //   this.$message.success("删除评论成功");
      //   this.getCommentList();
      this.$confirm('删除评论后无法回复, 是否继续?', '删除评论', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await this.$API.admin.reqRemoveComment(id)
          if (res.code === 200) {
            this.$message.success('删除评论成功')
            this.getCommentList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 分页函数
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      this.getCommentList()
    },
    handleCurrentChange(current) {
      this.pageParams.page = current
      this.getCommentList()
    }
  }
}
</script>

<style scoped>
.el-tag--warning {
  color: #fff;
  background-color: #f90;
}
.el-tag--info {
  color: #fff;
  background-color: #1890ff;
}
.el-tag--success {
  color: #fff;
  background-color: #52c41a;
}
.el-tag--danger {
  color: #fff;
  background-color: #f5222d;
}
.my-popper-class .el-select-dropdown__item.selected {
  background-color: rgba(0, 128, 255, 0.5) !important;
  color: #fff !important;
}
.headerBg {
  background: #eee!important;
}

</style>
